<!doctype html>
<html lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="x-rim-auto-match" content="none">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/highchart.js"></script>
    <title>资产明细</title>
</head>
<style>
    h2{
        font-weight: normal;
        height:38px;
        line-height:38px;
        color:#505050;
        font-size:15px;
        border-bottom: 1px solid #efefef;
    }
    .chart_title{
        padding:0 15px 0 0;
        margin-left:15px;
    }
    span{
        display: inline-block;
    }
    .title{
        padding:0 15px;
        background: #f5f5f5;
    }
    .tab{
       position: relative;
    }
    .tab:before{
        position: absolute;
        content:'';
        display: inline-block;
        width:13px;
        height:38px;
        left:-20px;
        background:url('img/tab.png') no-repeat center;
        background-size:13px 10px;
    }
    .no_linedate{
        line-height: 140px;
        font-size: 15px;
        color:#a1a0a0;
        display: none;
        text-align: center;
    }
    #no_piechart{
        background: url(img/pie.png) no-repeat center 61px;
        background-size: 138px 138px;
        font-size: 15px;
        color:#a1a0a0;
        display: none;
        text-align: center;
        padding-top: 210px;
    }
    .legend{
        padding:0 15px;
        height:28px;
        width:100%;
        font-size:12px;
        color:#505050;
        text-align: left;
        line-height: 28px;
        position: absolute;
        top:266px;

    }
    .legend span{
        display: inline-block;
        width:25%;
        height:28px;
        text-indent: 24px;
        float: left;
        position: relative;
    }
    .legend span:before{
        content:'';
        display: inline-block;
        position: absolute;
        width:24px;
        height:28px;
        left:0;
        top:0;
    }
    .legend span:nth-of-type(1):before{
        background: url(img/principle.png) no-repeat center;
        background-size: 13px 15px;
    }
    .legend span:nth-of-type(2):before{
        background: url(img/usable.png) no-repeat center;
        background-size: 17px 14px;
    }
    .legend span:nth-of-type(3):before{
        background: url(img/frozen.png) no-repeat center;
        background-size: 15px 15px;
    }
    .legend span:nth-of-type(4):before{
        background: url(img/interest.png) no-repeat center;
        background-size: 14px 15px;
    }

</style>
<body>
<!--<h2 class="title"><span id="this_year">2016</span>/<span class="this_month">07</span></h2>-->
<div id="invest_chart">
    <h2 class="chart_title"><span class="fl"><span class="this_month">七</span>月投资情况</span><span id='tabTo_earnings' class="fr tab" >切换收益情况</span></h2>
    <div id="line_chart1" style="width:100%;height:120px"></div>
    <div class='no_linedate' id="no_linedate1" style="width:100%;height:120px" >暂无数据</div>
</div>
<div style ='display:none' id="earnings_chart">
    <h2 class="chart_title"><span class="fl"><span class="this_month">七</span>月收益情况</span><span id='tabTo_invest' class="fr tab" >切换投资情况</span></h2>
    <div id="line_chart2" style="width:100%;height:120px"></div>
    <div class='no_linedate' id="no_linedate2" style="width:100%;height:120px"  >暂无数据</div>
</div>
<div class="small_margin"></div>
<h2 class="chart_title"><span class="fl">总资产</span><span class="fr">+<span  id='totalAccount'>0.00</span></span></h2>
<div id="pie_chart" style="width:100%;height:400px;">

</div>

<div id="no_piechart" style="width:100%;height:400px;position: relative"  >暂无数据
    <div class="legend">
        <span>待收本金</span>
        <span>可用余额</span>
        <span>冻结金额</span>
        <span>待收利息</span>
    </div>
</div>

<script>
    $(function () {

        $('#tabTo_earnings').click(function () {
            $('#invest_chart').hide();
            $('#earnings_chart').show();
        });
        $('#tabTo_invest').click(function () {
            $('#invest_chart').show();
            $('#earnings_chart').hide();
        });


        var userId=decodeURI(window.location.href).split('?')[1];
        var u_token=decodeURI(window.location.href).split('?')[2];
        var a_token=decodeURI(window.location.href).split('?')[3];

        var oDate=new Date();
        var year=oDate.getFullYear();
        var month=oDate.getMonth()+1;
        if(month<10){
            month='0'+month;
        }

        $('#this_year').html(year);
        $('.this_month').html(month);

        var line1_xDate=[];
        var line1_yDate1=[];
        var line1_yDate2=[];

        var line2_xDate=[];
        var line2_yDate1=[];
        var line2_yDate2=[];

        var pieDate=[];
        var iphone_width= 6;

        var w=document.body.clientWidth;
        if(w<=320){
            iphone_width= 6;
        }
        else if(320<w<=375){
            iphone_width=16;
        }else if(375<w){
            iphone_width=26;
        }
//投资
        $.ajax({
            type: "POST",
            url: "/mobile/invest/monthlyStat",
            data: {userId:userId},
            dataType:'json',
            async: true,
            success: function(data) {
                line1_yDate1=[data[0].investAmount,data[1].investAmount,data[2].investAmount,data[3].investAmount,null];
                line1_yDate2=[null, null, null, data[3].investAmount,data[4].investAmount];
                var show=false;
                for(var i=0;i<data.length;i++){
                    line1_xDate.push(data[i].incomeMonth);
                    if(data[i].investAmount){
                        show=true;
                    }
                }
                if(show){
                    $('#no_linedate1').hide();
                    $('#line_chart1').show();
                }else{
                    $('#no_linedate1').show();
                    $('#line_chart1').hide();
                }
                $('#line_chart1').highcharts({
                    colors: ['#feac2c'],
                    title: {
                        text: ''
                    },
                    chart: {
                        type: 'line'
                    },
                    xAxis: {
                        title:{
                            text:''
                        },
                        tickLength:0,
                        lineColor:'#FFFFFF',

                        categories: line1_xDate,
                        labels: {
                            style: {
                                color: '#434343',
                                fontSize:'12px'
                            },
                            formatter:function(){
                                return this.value+'月'
                            }
                        }

                    },
                    yAxis:{
                        title:{
                            text:''
                        },
                        labels:{
                            enabled : false
                        },
                        gridLineWidth:0

                    },
                    plotOptions: {

                        line: {
                            lineWidth: 1,
                            dataLabels: {
                                enabled: true,
                                formatter:function(){
                                    return Highcharts.numberFormat(this.y, 2, ".", ",")
                                },

                                style: {
                                    color: '#7e7e7e',
                                    fontSize:'12px',
                                    fontWeight:'normal'
                                }
                            },
                            enableMouseTracking: false
                        },

                        series: {
                            marker: {
                                symbol:"circle",
                                radius: 2.5
                            }
                        }

                    },
                    "series": [
                        {
                            "data": line1_yDate1

                        },
                        {
                            "data": line1_yDate2,
                            dashStyle:'dash'

                        }
                    ],
                    tooltip: {
                        enabled : false

                    },
                    legend:{
                        enabled : false
                    },
                    credits:{
                        enabled : false
                    },
                });
            },
            error: function() {

            },
            headers: {
                "Content-Type":"application/x-www-form-urlencoded;charset=UTF-8",
                "x-access-token":a_token,
                "x-user-token":u_token,
            }
        });

//收益
        $.ajax({
            type: "POST",
            url: "/mobile/account/incomeStat",
            data: {userId:userId},
            dataType:'json',
            async: true,

            success: function(data) {
                line2_yDate1=[data[0].incomeAmount,data[1].incomeAmount,data[2].incomeAmount,data[3].incomeAmount,null];
                line2_yDate2=[null, null, null, data[3].incomeAmount,data[4].incomeAmount];
                var show=false;
                for(var i=0;i<data.length;i++){
                    line2_xDate.push(data[i].incomeMonth);
                    if(data[i].incomeAmount){
                        show=true;
                    }
                }
                if(show){
                    $('#no_linedate2').hide();
                    $('#line_chart2').show();
                }else{
                    $('#no_linedate2').show();
                    $('#line_chart2').hide();
                }
                $('#line_chart2').highcharts({
                    colors: ['#2dc6ff'],
                    title: {
                        text: ''
                    },
                    chart: {
                        type: 'line'
                    },
                    xAxis: {
                        title:{
                            text:''
                        },
                        tickLength:0,
                        lineColor:'#FFFFFF',

                        categories: line2_xDate,
                        labels: {
                            style: {
                                color: '#434343',
                                fontSize:'12px'
                            },
                            formatter:function(){
                                return this.value+'月'
                            }
                        }

                    },
                    yAxis:{
                        title:{
                            text:''
                        },
                        labels:{
                            enabled : false
                        },
                        gridLineWidth:0

                    },
                    plotOptions: {

                        line: {
                            lineWidth: 1,
                            dataLabels: {
                                enabled: true,
                                formatter:function(){
                                    return Highcharts.numberFormat(this.y, 2, ".", ",")
                                },

                                style: {
                                    color: '#7e7e7e',
                                    fontSize:'12px',
                                    fontWeight:'normal'
                                }
                            },
                            enableMouseTracking: false
                        },

                        series: {
                            marker: {
                                symbol:"circle",
                                radius: 2.5
                            }
                        }

                    },
                    "series": [
                        {
                            "data": line2_yDate1

                        },
                        {
                            "data": line2_yDate2,
                            dashStyle:'dash'

                        }
                    ],
                    tooltip: {
                        enabled : false

                    },
                    legend:{
                        enabled : false
                    },
                    credits:{
                        enabled : false
                    },
                });
            },
            error: function() {

            },
            headers: {
                "Content-Type":"application/x-www-form-urlencoded;charset=UTF-8",
                "x-access-token":a_token,
                "x-user-token":u_token,
            },
        });

//总资产
        $.ajax({
            type: "POST",
            url: "/mobile/account/accountPage",
            data: {userId:userId},
            dataType:'json',
            async: true,

            success: function(data) {
                console.log(data);
                if(data.accountTotal=='0.00'){
                    $('#pie_chart').hide();
                    $('#no_piechart').show();
                }else{
                    $('#pie_chart').show();
                    $('#no_piechart').hide();
                }
                $('#totalAccount').html(data.accountTotal);
                var pieDate1=[];
                pieDate1.push(
                        ['待收本金',Number(data.accountPrincipal)],
                        ['可用余额',Number(data.accountUsable)],
                        ['冻结金额',Number(data.accountFrozen)],
                        ['待收利息',Number(data.income)]);
                for(var i=0;i<pieDate1.length;i++){
                    if(pieDate1[i][1]!=0){
                        pieDate.push(pieDate1[i])
                    }
                }
                $('#pie_chart').highcharts({
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false,
                    },
                    colors:[
                        '#ff6666',
                        '#55c5ff',
                        '#ffda77',
                        '#d668ff'
                    ],
                    title: {
                        text: ''
                    },
                    tooltip: {
                        enabled : false

                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            size:'138px',
                            innerSize:'44px',
                            showInLegend: true,
                            cursor: 'pointer',
                            borderWidth:0,
                            dataLabels: {
                                enabled: true,
                                formatter: function() {
                                    return '<p>'+Highcharts.numberFormat(this.y, 2, ".", ",")  +'</p>'+'<br/>'+ this.point.name +'';
                                },
                                style: {
                                    color: '#767676',
                                    fontSize:'12px',
                                    fontWeight:'normal'
                                }
                            }
                        }
                    },
                    legend:{
                        verticalAlign: 'bottom',
                        itemHoverStyle: {
                            color: '#fff'
                        },
                        itemStyle : {
                            'fontSize' : '12px',
                            'color'    : '#505050',
                            fontWeight:'normal'
                        },
                        width:'100%',
                        align: 'left',
                        symbolHeight: 8,
                        symbolWidth :iphone_width,
                        symbolRadius :6,
                        itemMarginBottom:75,
                        x: 0,
                        y: 30,
                        borderWidth: 0,
                        labelFormatter: function () {
                            return this.name;
                        },
                        useHTML: false,
                    },
                    credits:{
                        enabled : false
                    },
                    series: [{
                        type: 'pie',
                        name: '',
                        data: pieDate

                    }]
                });
            },
            error: function() {

            },
            headers: {
                "Content-Type":"application/x-www-form-urlencoded;charset=UTF-8",
                "x-access-token":a_token,
                "x-user-token":u_token,
            }
        });
    })

</script>
</body>

</html>